<template>
    <div>
 <h3>在模块中使用数据</h3>
    <h3>获取模块中的state</h3>
    <p>
      1.在页面中直接获取state：获取模块A中的title：
      {{ $store.state.moduleA.title }}
    </p>
 <p>2.使用computed获取模块中的state---{{ getTitleA }}</p>
  <p>3.使用映射的方法获取state---{{ mapTitleA }}</p>
    <hr />
     <h3>在模块中使用mutations</h3>
    <p>numA:{{ numA }}----numB:{{ numB }}</p>
    <p>
      1.在methods中提交模块A中的mutations
      <button @click="addNum">提交mutations--addNum</button>
    </p>
<p>
      2.映射的方法提交模块A中的addMoney:---
      <button @click="getmony(20)">addmoney---{{ money }}</button>
    </p>
    <hr />
     <h3>在模块中使用actions</h3>

    <p>
      1.在methods中获取actions :
      <button @click="addprice">获取price ---{{ price }}</button>
    </p>
    <p>
      2。使用映射的方法获取actions
      <button @click="getMovie">异步获取电影列表</button>
    </p>
    <h3 v-for="item in list" :key="item.mId">{{ item.title }}</h3>
    <hr />
      <h3>在模块中使用getters</h3>
    <p>1.在computed中获取getters: -----{{ getbooks }}</p>
    <p>2.使用映射的方法获取getters-----{{ books }}</p>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
    data() {
        return {

        };
    },
    created() {

    },
    computed:{
 getTitleA() {
      return this.$store.state.moduleA.title;
    },
  ...mapState({
      mapTitleA:state=>state.moduleA.title,
        numA: (state) => state.moduleA.numA,
      numB: (state) => state.moduleB.numB,
      money: (state) => state.moduleA.moneyA,
      price: (state) => state.moduleA.price,
      list: (state) => state.moduleA.list,
  }),
   getbooks() {
      //注意：
      return this.$store.getters["moduleA/getBook"];
    },
    ...mapGetters({
      books: "moduleA/getBook",
    }),
    },
    mounted() {

    },
    methods: {
 addNum() {
      this.$store.commit("moduleA/addNum");
    },
    ...mapMutations({
      getmony: "moduleA/addMoney",
    }),
   addprice() {
      this.$store.dispatch("moduleA/asyncPrice", 20000);
    },
...mapActions({
    getMovie:'moduleA/asyncList'
})
    
    }
};
</script>

<style >

</style>
